<template>
	<van-cell icon="coupon" is-link class="page-coupon" @click="toggleShow" v-if="!simple">
		<template #title>
			<span class="mgr5">98种优惠券可领</span> <van-tag plain color="var(--van-unicom-color)">最高减99999</van-tag>
		</template>
		领券
	</van-cell>
	<span class="txt-primary font-14" style="margin-left:auto" @click="toggleShow" v-else>领券</span>
	<van-action-sheet v-model:show="show" title="可领优惠券" closeable style="height:80vh">
		<ul class="coupons-group" v-if="couponsList&&couponsList.length>0">
			<coupon-item v-for="item in couponsList" :key="item.coupIssueId" :item="item"/>
		</ul>
		<div class="sheet-btn-wrap">
			<van-button type="primary" block round @click="toggleShow">关 闭</van-button>
		</div>
	</van-action-sheet>
</template>
<style lang="scss" scoped>
.page-coupon{
	:deep(.van-cell__left-icon){color:var(--van-unicom-color);}
	:deep(.van-cell__title){flex:5;font-size:13px;}
	:deep(.van-cell__value){font-size:13px;}
}
.coupons-group{
	height:calc(80vh - 108px - env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;
	margin:10px 10px 0 10px;padding:0;display:block;
	:deep(.coupon-amount::before){background:var(--white-color);}

}
.sheet-btn-wrap{
	--van-button-primary-background:var(--van-primary-color)
}
</style>
<script lang="ts" setup>
//props
const props = defineProps({
	shopId:{
		type:String,
		required:true,
	},
	gdsId:{
		type:String,
		required:false,
	},
	simple:{
		type:Boolean,
		required:false,
		default:false,
	}
})

//data
const show=ref(false)
//maxAcquireAmount 每个渠道最多可领多少张
//acquiredAmount 当前渠道已领多少张
//remainAmount表示该类优惠券还剩多少张，如果是店铺/管理员则不提供领取按钮及剩余展示（remainAmount为null），如果是游客则有领取按钮，不展示剩多少张（remainAmount为null）
const couponsList = ref([
	{
		coupIssueId:'1111',
		couponAmount:100,
		activeType:1,activeDay:100,activeTime:'',inactiveTime:'',
		controlMsg:'全场通用',limitMsg:'满1000可用',couponTypeName:'国庆大酬宾100元券',
		remainAmount:500,acquiredAmount:0,maxAcquireAmount:3,
	},
	{
		coupIssueId:'2222',
		couponAmount:500,
		activeType:2, activeDay:0,activeTime:'2023.01.23',inactiveTime:'2023.12.23',
		controlMsg:'全场通用',limitMsg:'满5000可用',couponTypeName:'国庆大酬宾500元券',
		remainAmount:0,acquiredAmount:1,maxAcquireAmount:3,
	},
	{
		coupIssueId:'3333',
		couponAmount:5000,
		activeType:1,activeDay:100,activeTime:'',inactiveTime:'',
		controlMsg:'限华为品牌',limitMsg:'满50000可用',couponTypeName:'国庆大酬宾5000元券',
		remainAmount:500,acquiredAmount:1,maxAcquireAmount:3,
	},
	{
		coupIssueId:'4444',
		couponAmount:1000,
		activeType:2, activeDay:0,activeTime:'2023.01.23',inactiveTime:'2023.12.23',
		controlMsg:'限商品 iphone14, iphone13 mini, apple watch 8 series',limitMsg:'满10000可用',couponTypeName:'国庆大酬宾1000元券',
		remainAmount:10,acquiredAmount:1,maxAcquireAmount:5,
	},
])

//method
const toggleShow =()=>{
	show.value = !show.value
}
</script>